<template>
    <div class="chat-box">
        <!-- <img class="chat-bg" src="@/assets/img/window-bg.png" alt=""> -->
        <div class="chat-box-c">
            <div class="chat-title">
                聚合客服
            </div>
            <div class="chat-content">集各大账号交易平台于一身，让店铺管理、客服接待更方便
                平台原生操作界面 支持同平台多店铺登录
                自定义提示音 消息不再错过
            </div>
            <div class="chat-grid">
                <div>客服接待</div>
                <div>商品统计</div>
                <div>砍价功能</div>
                <div>扫号功能</div>
            </div>
            <div class="chat-btn" @click="download">
                <img src="@/assets/img/window-donload.png" alt="win下载">
                <div> 立即下载</div>

            </div>
        </div>
    </div>
</template>
<script>
import { downloadEle } from '@/api/system/themeManage'
export default {

    components: {},
    data() {
        return {
            appTyp: 1

        }
    },
    methods:
    {
        async download() {
            try {
                const res = await downloadEle();
                // 直接取 data.appDownloadUrl
                const url = res.data?.appDownloadUrl;
                if (url) {
                    window.open(url, '_blank');
                } else {
                    this.$message.error('未获取到下载地址');
                }
            } catch (e) {
                this.$message.error('下载失败');
            }
        }
    },
}
</script>

<style scoped lang="scss">
.chat-box {
    padding: 91px 100px;
    height: 100%;
    position: relative;
    z-index: 2;
    background: url("../../../assets/img/window-bg.png") no-repeat center;
    background-size: cover;

    .chat-bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    .chat-box-c {
        width: 50%;
    }
}

.chat-title {
    color: #554884;
    font-size: 66px;
    font-weight: bold;
}

.chat-content {
    margin-top: 24px;
    color: #000000;
    font-size: 20px;
    font-weight: 500;
    line-height: 38px;
}

.chat-grid {
    margin: 26px 0 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(127px, 1fr));
    gap: 0 16px;

    div {
        background: #fff;
        height: 43px;
        line-height: 43px;
        border-radius: 8px;
        border: 1px solid rgba(85, 72, 132, 0.22);
        font-size: 18px;
        font-weight: bold;
        color: #000000;
        text-align: center;
    }
}

.chat-btn {
    cursor: pointer;
    width: 180px;
    height: 60px;
    background: #554884;
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
        background: #554884;

    }

    img {

        width: 40px;
        height: 40px;
    }

    div {
        margin-bottom: 4px;
    }
}
</style>